<template>
	<div class="workorderIndexContent">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<wj-Button type="save" @click="handleAdd">添加</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input
					placeholder="请输关键字检索"
					type="text"
					v-model="searchValue"
					@keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
					@blur="searchEvent"
				></el-input>
			</div>
		</div>
		<div class="strategyList">
			<el-table
				:data="tableData"
				style="width: 100%"
				:default-sort="{ prop: 'orderNumber', order: 'descending' }"
				:cell-class-name="tableCellClassName"
				:row-class-name="'tableRowClassName'"
			>
				<el-table-column prop="orderNumber" label="工单编号" sortable width="320" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="user" label="创建人" width="180"> </el-table-column>
				<el-table-column prop="numberKilometers" label="公桩号" width="180"> </el-table-column>
				<el-table-column prop="note" label="工单内容" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="status" label="工单状态" width="180" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0">未处理</span>
						<span v-if="scope.row.status == 1">已处理</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleDetails(scope.$index, scope.row)">处置</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[11]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——处置 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox contentBoxDetailsWorkorder_class">
				<div class="contentBox_header">
					<p>工单信息详情</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>公桩号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="workorderDetails.workorderDevice" placeholder="请输入异常设备名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>异常类型<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="workorderDetails.workorderType" placeholder="请选择异常类型">
								<el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form">
						<span>处理方式<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="workorderDetails.workorderWay" placeholder="请选择处理方式">
								<el-option v-for="item in optionWay" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_textarea">
						<span>备注<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-textarea">
							<el-input type="textarea" :rows="2" placeholder="请输入描述信息" v-model="workorderDetails.workorderDes"> </el-input>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save">关闭工单</wj-Button>
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleDetailsConfirm, cls: 'contentBoxDetailsWorkorder_class' }"
						>确定</wj-Button
					>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——新增 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddWorkorder_class">
				<div class="contentBox_header">
					<p>新增工单</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>公桩号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="workorderAdd.workorderDevice" placeholder="请输入异常设备名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>异常类型<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="workorderAdd.workorderType" placeholder="请选择异常类型">
								<el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form">
						<span>处理方式<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="workorderAdd.workorderWay" placeholder="请选择处理方式">
								<el-option v-for="item in optionWay" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_textarea">
						<span>备注<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-textarea">
							<el-input type="textarea" :rows="2" placeholder="请输入描述信息" v-model="workorderAdd.workorderDes"> </el-input>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleAddConfirm, cls: 'contentBoxAddWorkorder_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import { workorder_all, workorder_add, workorder_details } from "@/utils/request/api";
export default {
	name: "WorkorderIndex",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 异常类型
			optionType: [
				{
					value: "1",
					label: "网络故障",
				},
				{
					value: "2",
					label: "vpn链路异常",
				},
				{
					value: "3",
					label: "4G链路异常",
				},
				{
					value: "4",
					label: "非法闯入",
				},
				{
					value: "5",
					label: "温度异常",
				},
				{
					value: "6",
					label: "湿度异常",
				},
				{
					value: "7",
					label: "供电故障",
				},
				{
					value: "8",
					label: "控制器异常",
				},
				{
					value: "9",
					label: "网络攻击",
				},
			],
			// 处理方式
			optionWay: [
				{
					value: "1",
					label: "设备更换",
				},
			],
			// 自定义弹窗控制——处置
			alertBoxFormVisible: false,
			// 工单详情
			workorderDetails: {
				workorderId: "",
				workorderDevice: "",
				workorderType: "",
				workorderWay: "",
				workorderDes: "",
			},
			// 自定义弹窗控制——新增
			alertBoxAddVisible: false,
			// 新增工单
			workorderAdd: {
				workorderDevice: "",
				workorderType: "",
				workorderWay: "",
				workorderDes: "",
			},
		};
	},
	created() {},
	mounted() {
		this.getAllWorkorder(this.pageNum, this.pageSize);
	},
	methods: {
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchWorkorder(this.pageNum, this.pageSize, this.searchValue);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "") {
				this.getSearchWorkorder(val, this.pageSize, this.searchValue);
			} else {
				this.getAllWorkorder(val, this.pageSize);
			}
		},
		// 处置
		handleDetails(index, row) {
			console.log(index, row);
			this.alertBoxFormVisible = true;
			this.workorderDetails = {
				workorderId: row.id,
				workorderDevice: row.numberKilometers,
				workorderType: row.type != null ? row.type.toString() : "",
				workorderWay: row.disposalWay != null ? row.disposalWay.toString() : "",
				workorderDes: row.note,
			};
		},
		// 详情中type转文字
		transitionType(value) {
			var text = "";
			if (value == 1) {
				text = "内容";
			} else if (value == 2) {
				text = "运维";
			} else if (value == 3) {
				text = "监控";
			}
			return text;
		},
		// 工单状态——文字样式
		tableCellClassName({ row, columnIndex }) {
			// console.log(row);
			// console.log(rowIndex);
			// console.log(column);
			// console.log(columnIndex);
			if (row.status == 0 && columnIndex == 3) {
				return "forbidden-cell-read";
			}
			if (row.status == 1 && columnIndex == 3) {
				return "forbidden-cell-unread";
			}
			return "";
		},
		// alertBox——处置 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
		},
		// alertBox——处置 确认
		handleDetailsConfirm() {
			if (this.workorderDetails.workorderType == "") {
				this.$msg.error("请选择异常类型！");
			} else if (this.workorderDetails.workorderWay == "") {
				this.$msg.error("请选择处理方式！");
			} else if (this.workorderDetails.workorderDes == "") {
				this.$msg.error("请输入工单描述信息！");
			} else {
				workorder_details({
					id: this.workorderDetails.workorderId,
					numberKilometers: this.workorderDetails.workorderDevice,
					type: this.workorderDetails.workorderType,
					disposalWay: this.workorderDetails.workorderWay,
					note: this.workorderDetails.workorderDes,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("工单修改成功！");
						this.alertBoxFormVisible = false;
						this.currentPage = 1;
						this.total = 0;
						this.pageSize = 10;
						this.pageNum = 1;
						this.getAllWorkorder(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("工单修改失败！");
					}
				});
			}
		},
		// 新增
		handleAdd() {
			this.alertBoxAddVisible = true;
		},
		// 初始化新增数据
		initWorkorderAdd() {
			this.workorderAdd = {
				workorderDevice: "",
				workorderType: "",
				workorderWay: "",
				workorderDes: "",
			};
		},
		// alertBox——新增 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initWorkorderAdd();
		},
		// alertBox——新增 确认
		handleAddConfirm() {
			if (this.workorderAdd.workorderType == "") {
				this.$msg.error("请选择异常类型！");
			} else if (this.workorderAdd.workorderWay == "") {
				this.$msg.error("请选择处理方式！");
			} else if (this.workorderAdd.workorderDes == "") {
				this.$msg.error("请输入工单描述信息！");
			} else {
				workorder_add({
					numberKilometers: this.workorderAdd.workorderDevice,
					type: this.workorderAdd.workorderType,
					disposalWay: this.workorderAdd.workorderWay,
					note: this.workorderAdd.workorderDes,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("工单新增成功！");
						this.alertBoxAddVisible = false;
						this.initWorkorderAdd();
						this.currentPage = 1;
						this.total = 0;
						this.pageSize = 10;
						this.pageNum = 1;
						this.getAllWorkorder(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("工单新增失败！");
					}
				});
			}
		},
		// 查询所有工单
		getAllWorkorder(page, size) {
			workorder_all({
				page: page,
				size: size,
			}).then((res) => {
				if (res.code == 200) {
					console.log(res);
					this.tableData = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("工单管理查询失败！");
				}
			});
		},
		// 搜索工单
		getSearchWorkorder(page, size, value) {
			workorder_all({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				if (res.code == 200) {
					console.log(res);
					this.tableData = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("工单管理搜索查询失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.workorderIndexContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 85%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
				margin-right: 12px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;
		/deep/ .el-table {
			border-left: 1px solid #ebeef5;
			border-right: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
		}
		/deep/ .el-link {
			margin: 0 12px 0 0;
		}
		/deep/ .el-table .forbidden-cell-read .cell {
			color: #f56c6c;
		}
		/deep/ .el-table .forbidden-cell-unread .cell {
			color: #67c23a;
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
